<template>
  <div class='add-eval'>
    <div class='title'>
      <card _Title='商品投诉' :_Size='16'></card>
      <p>
        <span class='color999'>订单号：</span><span>{{ $route.query.sn }}</span>
        <span class='color999 ml_20' v-if='order.createTime'>{{"创建时间：" + order.createTime }}</span>
      </p>
    </div>
    <div class='goods-eval'>
      <div class='goods-con'>
        <img :src='orderGoods.image' class='hover-pointer' alt='' width='100'
             @click='goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)'>
        <p class='hover-pointer color999' @click='goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)'>
          {{ orderGoods.goodsName }}</p>
        <p>{{ orderGoods.goodsPrice | unitPrice('￥') }}</p>
      </div>

      <div class='eval-con'>
        <div>
          <span class='color999'>投诉主题：</span>
          <Select v-model='form.complainTopic' style='width:260px;margin-bottom:10px'>
            <Option v-for='item in reasonList' :value='item.reason' :key='item.id'>{{ item.reason }}</Option>
          </Select>
          <Input type='textarea' maxlength='500' show-word-limit :rows='4' placeholder='请输入投诉内容'
                 v-model='form.content' />
        </div>
        <div style='display:flex;align-items:center;'>
          <div class='demo-upload-list' v-for='(img, index) in orderGoods.uploadList' :key='index'>
            <img :src='img'>
            <div class='demo-upload-list-cover'>
              <Icon type='ios-eye-outline' @click.native='handleView(img)'></Icon>
              <Icon type='ios-trash-outline' @click.native='handleRemove(index)'></Icon>
            </div>
          </div>
          <Upload
            :show-upload-list='false'
            :on-success='handleSuccess'
            :before-upload='OssPolicy'
            :format="['jpg','jpeg','png']"
            :action='action'
            :headers='accessToken'
            :data='this.ossBody'
            style='display: inline-block;width:58px;'>
            <div class='hover-pointer icon-upload' style=''>
              <Icon type='ios-camera' size='20'></Icon>
            </div>
          </Upload>
          <div class='describe'>上传投诉凭证，最多5张</div>
        </div>
      </div>
    </div>
    <Button type='primary' class='mt_10' :loading='loading' @click='save'>提交</Button>
    <Modal title='View Image' v-model='visible'>
      <img :src='previewImage' v-if='visible' style='width: 100%'>
    </Modal>
  </div>
</template>
<script>
import * as ApiOrder from '@/api/MyApi/Order';
import * as ApiAfterSale from '@/api/MyApi/AfterSale';
import { orderDetail } from '@/api/order.js';
import { afterSaleReason, handleComplain } from '@/api/member.js';
import { commonUrl } from '@/plugins/request.js';
import storage from '@/plugins/storage';
import { getOrderComplaintItem, getOrderDetail } from '../../../api/MyApi/Order';
import { addOrderComplaint, getAfterSaleReasonByType } from '../../../api/MyApi/AfterSale';
import { v4 as uuidv4 } from 'uuid';
import * as ApiOss from '@/api/MyApi/Oss'

export default {
  data() {
    return {
      order: {}, // 订单详情
      orderGoods: {}, // 订单商品
      form: { // 投诉表单
        complainTopic: '',
        content: '',
      }, // 表单
      visible: false, // 图片预览
      action: "https://xmut-mall.oss-cn-hangzhou.aliyuncs.com", // 上传地址
      accessToken: {}, // 验证token
      previewImage: '', // 图片地址
      loading: false, // 加载状态
      reasonList: [], // 投诉原因
      ossBody: {
        policy: "",
        signature: "",
        ossaccessKeyId: "",
        key: "",
        dir: "",
        host: ""
      }, // oss签名上传所需的请求体
      uploadHeader: {},
    };
  },
  methods: {
    OssPolicy(file) {
      return new Promise((resolve, reject) => {
        ApiOss.policy().then(res => {
          if (res.data.code == 0) {
            this.ossBody.policy = res.data.data.policy;
            this.ossBody.signature = res.data.data.signature;
            this.ossBody.ossaccessKeyId = res.data.data.accessid;
            this.ossBody.dir = res.data.data.dir;
            this.ossBody.key = res.data.data.dir + uuidv4() + file.name;
            this.ossBody.host = res.data.data.host;
            resolve(true);
          } else {
            this.$Message.error('网络拥堵')
            return false;
          }
        }).catch(err => {
          reject(false);
        });
      });
    },
    // 获取订单详情
    getOrderDetail() {
      let params = {};
      params.sn = this.$route.query.sn;
      params.id = this.$route.query.id;
      ApiOrder.getOrderComplaintItem(this.$route.query.id).then((res) => {
        if (res.data.code == 201) {
          this.order = res.data.obj;
          this.orderGoods = res.data.obj;
          this.orderGoods.uploadList = [];
          console.log('订单数据:', this.order);
        }
      });
      ApiAfterSale.getAfterSaleReasonByType('COMPLAIN').then(res=>{
        if (res.data.code == 201){
          this.reasonList = res.data.obj;
          this.$set(this.form, 'complainTopic', res.result[0].reason);
          this.$forceUpdate();
        }
      })
    },
    save() { // 提交投诉信息
      let params = {
        goodsId: this.orderGoods.goodsId,
        complainTopic: this.form.complainTopic,
        content: this.form.content,
        images: this.orderGoods.uploadList.toString(),
        orderSn: this.$route.query.sn,
        skuId: this.orderGoods.skuId,
        ItemId: this.$route.query.id,
        ItemNum: this.orderGoods.num,
      };
      ApiAfterSale.addOrderComplaint(params).then(res=>{
        if(res.data.code == 201){
          this.$Message.success('投诉申请已提交，感谢您的反馈');
          this.$router.push({ name: 'ComplainList' });
        }
      })
      // handleComplain(params).then(res => {
      //   if (res.success) {
      //     this.$Message.success('投诉申请已提交，感谢您的反馈');
      //     this.$router.push({ name: 'ComplainList' });
      //   }
      // });
    },
    goGoodsDetail(skuId, goodsId) { // 跳转商品详情
      let routerUrl = this.$router.resolve({
        path: '/goodsDetail',
        query: { skuId, goodsId },
      });
      window.open(routerUrl.href, '_blank');
    },
    handleView(name) { // 预览图片
      this.previewImage = name;
      this.visible = true;
    },
    handleRemove(index) { // 移除图片
      this.orderGoods.uploadList.splice(index, 1);
      this.$forceUpdate();
    },
    handleSuccess(res, file) { // 上传成功回调
      this.$Message.success('上传成功');
      let fileName = this.ossBody.host +
        '/' +
        this.ossBody.key.replace('${filename}', file.name);
      this.orderGoods.uploadList.push(fileName);
      this.$forceUpdate();
    },
    handleBeforeUpload() { // 上传之前钩子函数
      const check = this.orderGoods.uploadList.length < 6;
      if (!check) {
        this.$Notice.warning({
          title: '最多可以上传五张图片',
        });
        return check;
      }
    },
  },
  mounted() {
    this.getOrderDetail();
    this.accessToken.accessToken = storage.getItem('accessToken');
    window.scrollTo(0, 0);
  },
};
</script>
<style lang='scss' scoped>
.delivery-rate {
  display: flex;
  align-items: center;
  margin-top: 20px;
  height: 50px;
  border-bottom: 1px solid #eee;

  > div:nth-child(1) {
    width: 30%;
    font-weight: bold;
  }
}

.goods-eval {
  display: flex;

  .goods-con {
    width: 30%;
    padding: 20px;
    text-align: center;

    p {
      word-wrap: wrap;

      &:hover {
        color: $theme_color;
      }
    }
  }

  .eval-con {
    width: 70%;
    padding: 20px;
  }
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
  margin-top: 10px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.icon-upload {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  display: inline-block;
  border: 1px dashed #999;
  border-radius: 4px;
  margin-top: 10px;

  &:hover {
    cursor: pointer;
    border-color: $theme_color;
  }
}

.describe {
  font-size: 12px;
  color: #999;
  position: relative;
  top: 46px;
  left: -60px;
}
</style>
